<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>商品列表</title>
  <link rel="icon" href="../img/favicon.webp">
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/list.css">
</head>

<body>
  <div class="header container">
    仿站电商 · 商品列表
    <p style="display: block;">
      <a href="./index.html">回到首页</a>
    </p>
  </div>

  <div class="filter container">
    <div class="cateBox">
      <p>分类</p>
      <ul class="category">
        <!-- js渲染 -->
      </ul>
    </div>
    <div class="cateBox">
      <p>筛选</p>
      <ul class="filterBox">
        <li data-type='' class="active">全部</li>
        <li data-type='hot'>热销</li>
        <li data-type='sale'>折扣</li>
      </ul>
    </div>
    <div class="cateBox">
      <p>折扣</p>
      <ul class="filterBox saleBox">
        <li data-type="10" class="active">全部</li>
        <li data-type="5">5折</li>
        <li data-type="6">6折</li>
        <li data-type="7">7折</li>
        <li data-type="8">8折</li>
        <li data-type="9">9折</li>
      </ul>
    </div>
    <div class="cateBox">
      <p>排序</p>
      <ul class="filterBox sortBox">
        <li data-type="id" data-method="ASC" class="active">综合 正序</li>
        <li data-type="id" data-method="DESC">综合 倒序</li>
        <li data-type="sale" data-method="ASC">折扣 正序</li>
        <li data-type="sale" data-method="DESC">折扣 倒序</li>
        <li data-type="price" data-method="ASC">价格 正序</li>
        <li data-type="price" data-method="DESC">价格 倒序</li>
      </ul>
    </div>
    <div class="cateBox">
      <p>搜索</p>
      <input type="text" class="search">
    </div>
  </div>

  <div class="pagination container">
    <span class="first disable">首页</span>
    <span class="prev disable">上一页</span>
    <p class="total"></p>
    <span class="next">下一页</span>
    <span class="last">末页</span>
    <input type="number" class="jump" value="1"><button class="go" type="button">跳转</button>
    <select class="pagesize">
      <option value="12">12</option>
      <option value="16">16</option>
      <option value="20">20</option>
      <option value="24">24</option>
    </select>
  </div>

  <ul class="list container">
    <!-- 如果筛选或搜索中 没有商品则展示一下图片 -->
    <!-- <img src="./img/no.png"> -->
    <!-- js渲染的数据 -->
  </ul>
  <div class="footer container">页面底部</div>
  <div class="info-warning"></div>

  <script type="module" src="../js/list.js">
    
  </script>
</body>


</html>